<template>
	<div class="wos-flex wos-flex-end">
		<div class="wos-flex-auto">
			<wos-video style="width:100%;height: 710px;line-height: 710px"></wos-video>
			<div>
				<img src="../../assets/images/video-bar.png" style="width: 100%">
			</div>
		</div>
		<div style="width: 281px" class="">
			<div>
				<div id="s">
					<a-input-search placeholder="请输入" style="width: 100%" />
					<div id="checkbox-main">
						<div v-for="(item, index) in canvas" :key="index">
							通道{{item[2].value}} - {{item[8].value}}
						</div>
					</div>
				</div>
				<img src="../../assets/images/ctrl.png" style="width: 100%">
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "video",
	    data:function(){
            return{
                canvas:[]
            }
	    },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/direct/canvas.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.canvas = response.data.data.tbody
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            }
        }
    }
</script>

<style scoped lang="less">
	#s{
		width: 100%;
		border: 1px solid #D9D9D9;
		padding: 10px;
		#checkbox-main{
			padding: 10px;
			height: 350px;
			overflow-y: auto;
			div{
				padding-left: 30px;
			}
		}
		.pl-20{
			padding-right: 20px;
		}
	}
</style>
